import React, { Suspense } from 'react';
import { useRoutes } from 'react-router-dom'
import url1 from '../images/dianying.png'
import url2 from '../images/yingyuan.png'
import url3 from '../images/wode.png'
import { HomeO } from '@react-vant/icons';
const Movie = React.lazy(() => import('../views/movie'))
const Cinema = React.lazy(() => import('../views/cinema'))
const My = React.lazy(() => import('../views/my'))
const Layout = React.lazy(() => import('../layout'))
const Detail = React.lazy(() => import('../views/detail'))

export const tabbar_router = [{
  path: '/',
  element: <Movie></Movie>,
  meta: {
    title: '电影',
    // icon: <img src={url1}></img>
    icon: <HomeO  />
  }
}, {
  path: '/cinema',
  element: <Cinema></Cinema>,
  meta: {
    title: '影院',
    icon: <img src={url2}></img>
  }
}, {
  path: '/my',
  element: <My></My>,
  meta: {
    title: '我的',
    icon: <img src={url3}></img>
  }
}]
export const router_list = [{
  path: '/',
  element: <Layout></Layout>,
  children: tabbar_router
}, {
  path: '/detail/:id',
  element: <Detail></Detail>
}]

const Router = () => {
  const RouterView = () => useRoutes(router_list)


  return (
    <Suspense fallback="路由加载中...">
      <RouterView></RouterView>
    </Suspense>
  )
}

export default Router